<template>
    <view class="app-layout">
        <app-layout>
            <view class="poster-goods dir-top-nowrap" v-if="loadShow">
                <view id="head" class="head box-grow-1 main-center">
                    <template v-if="selectForm.style == styleList[0].value">
                        <app-goods-poster-one :info="info" :form="selectForm"
                                              :multiple="multiple"></app-goods-poster-one>
                    </template>
                    <template v-if="selectForm.style == styleList[1].value">
                        <app-goods-poster-two :info="info" :form="selectForm"
                                              :multiple="multiple"></app-goods-poster-two>
                    </template>
                    <template v-if="selectForm.style == styleList[2].value">
                        <app-goods-poster-three :info="info" :form="selectForm"
                                                :multiple="multiple"></app-goods-poster-three>
                    </template>
                    <template v-if="selectForm.style == styleList[3].value">
                        <app-goods-poster-four :info="info" :form="selectForm"
                                               :multiple="multiple"></app-goods-poster-four>
                    </template>
                </view>
                <view class="setting box-grow-0">
                    <view class="dir-left-nowrap line">
                        <view class="box-grow-0 main-center cross-center label">
                            <icon :style="{'background-color': getTheme.background}" type></icon>
                            <text>样式</text>
                        </view>
                        <view class="dir-left-wrap box-grow-1">
                            <block v-for="(item,key) in styleList" :key="key">
                                <template v-if="config.poster_style.indexOf(item.value.toString()) !== -1">
                                    <view  :key="key"
                                           @click="changeStyle(item.value)"
                                           :style="{'border-color': item.value == selectForm.style ? getTheme.border : ''}"
                                           :class="item.value == selectForm.style ? 'active' : ''"
                                           class="style-input main-center cross-center"
                                    >
                                        <text>{{item.label}}</text>
                                        <icon
                                            v-if="item.value == selectForm.style"
                                            :style="{'background-color': getTheme.background}"
                                            class="icon-active" type></icon>
                                    </view>
                                </template>
                            </block>
                        </view>
                    </view>

                    <view class="dir-left-nowrap line">
                        <view class="box-grow-0 main-center cross-center label">
                            <icon :style="{'background-color': getTheme.background}" type></icon>
                            <text>排版</text>
                        </view>
                        <view class="dir-left-wrap box-grow-1">
                            <block v-for="(item,key) in typesettingList" :key="key">
                                <template v-if="config.image_style.indexOf(item.value.toString()) !== -1">
                                    <view  :key="key"
                                           @click="changeTypeSetting(item.value)"
                                           :style="{'border-color': item.value == selectForm.typesetting ? getTheme.border : ''}"
                                           :class="item.value == selectForm.typesetting ? 'active' : ''"
                                           class="line-input dir-left-nowrap main-center cross-center"
                                    >
                                        <img :src="item.pic_url" class="icon-square"
                                             :style="{'background-image': `url(${appImg.poster[item.pic_name]})`}"/>
                                        <text>{{item.label}}</text>
                                        <icon v-if="item.value == selectForm.typesetting"
                                              :style="{'background-color': getTheme.background}"
                                              class="icon-active" type></icon>
                                    </view>
                                </template>
                            </block>
                        </view>
                    </view>

                    <view class="dir-left-nowrap line" style="margin-bottom:5rpx">
                        <view class="box-grow-0 main-center cross-center label">
                            <icon :style="{'background-color': getTheme.background}" type></icon>
                            <text>类型</text>
                        </view>
                        <view class="dir-left-wrap box-grow-1" :class="getTheme">
                            <view v-for="(item,key) in typeList" :key="key"
                                  @click="changeType(item.value)"
                                  :style="{'border-color': item.value == selectForm.type ? getTheme.border : ''}"
                                  :class="item.value == selectForm.type ? 'active' : ''"
                                  class="style-input dir-left-nowrap main-center cross-center"
                            >
                                <view v-if="item.value === 1" class="type-pure"></view>
                                <view v-if="item.value === 2" class="type-gradient"></view>
                                <text>{{item.label}}</text>
                                <icon v-if="item.value == selectForm.type"
                                      :style="{'background-color': getTheme.background}"
                                      class="icon-active" type></icon>
                            </view>
                        </view>
                    </view>

                    <view class="dir-left-nowrap line">
                        <view class="box-grow-0 main-center cross-center label" style="margin-top: 19rpx">
                            <icon :style="{'background-color': getTheme.background}" type></icon>
                            <text>颜色</text>
                        </view>
                        <view class="dir-left-wrap box-grow-1">
                            <scroll-view scroll-x class="app-scroll" enable-flex="true">
                                <view v-for="(color,key) in config.color" :key="key"
                                      @click="changeColor(color)"
                                      class="color-bg"
                                      :style="{'background': `${color}`}">
                                    <icon v-if="color == selectForm.color"
                                          :style="{'background-color': getTheme.background}"
                                          class="icon-active" type></icon>
                                </view>
                            </scroll-view>
                        </view>
                    </view>
                    <view @click="submitSave" :style="{'background-color': getTheme.background}" class="button main-center cross-center">保存图片
                    </view>
                </view>
            </view>
        </app-layout>
    </view>
</template>

<script>
import AppGoodsPosterOne from './components/app-goods-poster-one.vue';
import AppGoodsPosterTwo from './components/app-goods-poster-two.vue';
import AppGoodsPosterThree from './components/app-goods-poster-three.vue';
import AppGoodsPosterFour from './components/app-goods-poster-four.vue';
import {mapGetters, mapState} from "vuex";

export default {
    name: "goods",
    components: {AppGoodsPosterOne, AppGoodsPosterTwo, AppGoodsPosterThree, AppGoodsPosterFour},
    computed: {
        ...mapGetters('mallConfig', {
            getTheme: 'getTheme'
        }),
        ...mapState({
            appImg: state => state.mallConfig.__wxapp_img
        }),
    },
    data() {
        return {
            loadShow: false,
            styleList: [{
                label: '样式一',
                value: 1
            }, {
                label: '样式二',
                value: 2
            }, {
                label: '样式三',
                value: 3
            }, {
                label: '样式四',
                value: 4
            }],
            typesettingList: [{
                label: '1张图',
                value: 1,
                pic_name: 'pic_one',
            }, {
                label: '2张图',
                value: 2,
                pic_name: 'pic_two',
            }, {
                label: '3张图',
                value: 3,
                pic_name: 'pic_three',
            }, {
                label: '4张图',
                value: 4,
                pic_name: 'pic_four',
            }, {
                label: '5张图',
                value: 5,
                pic_name: 'pic_five',
            }],
            typeList: [],
            colorList: [],
            selectForm: null,
            config: {
                color: [],
                image_style: [],
                poster_style: []
            },
            multiple: 0,
            info: null,
            posterConfig: '',
            posterGenerate: ''
        }
    },
    onLoad(options) {
        this.$commonLoad.onload(options);
        let {poster_config, poster_generate} = options;
        if (poster_config && poster_generate) {
            // #ifdef MP
            this.posterConfig = unescape(poster_config);
            this.posterGenerate = unescape(poster_generate);
            // #endif
            // #ifdef H5
            this.posterConfig = atob(poster_config);
            this.posterGenerate = atob(poster_generate);
            // #endif
        } else {
            return;
        }
        this.$nextTick(function () {
            this.loadData();
        })
    },

    methods: {
        calcMultiple() {
            let query = null;

            // #ifndef MP-WEIXIN
            query = uni.createSelectorQuery();
            // #endif
            // #ifdef MP-WEIXIN
            query = uni.createSelectorQuery().in(this);
            // #endif

            query.select('#head').boundingClientRect(item => {
                // #ifndef  MP-TOUTIAO
                this.multiple = (item.height * (750 / uni.getSystemInfoSync().windowWidth) - 24 - 24) / 1334;
                // #endif
                // uni.showToast({title: item.height+ '++' + uni.getSystemInfoSync().screenWidth + '++' +  uni.getSystemInfoSync().windowWidth , icon: 'none'});
                // #ifdef  MP-TOUTIAO
                this.multiple = 0.455;
                // #endif

            }).exec();
        },
        loadData() {
            this.$request({
                url: this.posterConfig,
            }).then(info => {
                this.$hideLoading();
                this.loadShow = true;
                let { code, data, msg }  = info;
                if (code === 0) {
                    this.config = data.config;
                    this.info = data.info;
                    this.typeList = [{label: '纯色', value: 1}, {label: '渐变', value: 2}];
                    this.selectForm = {
                        color: this.config['color'][0],
                        style: this.config['poster_style'][0],
                        typesetting: this.config['image_style'][0],
                        type: 1
                    }
                    setTimeout(() => {
                        this.calcMultiple();
                    });
                } else {
                    uni.showToast({title: msg,icon: 'none'});
                }
            })
        },
        changeStyle(value) {
            this.selectForm.style = value;
        },
        changeTypeSetting(value) {
            this.selectForm.typesetting = value;
        },
        changeType(value) {
            this.selectForm.type = value;
        },
        changeColor(value) {
            this.selectForm.color = value;
        },
        submitSave() {
            this.$showLoading({text: '生成中'});

            this.$request({
                url: this.posterGenerate,
                data: this.selectForm
            }).then(info => {
                this.$hideLoading();
                let { code, data, msg } = info;
                if (code === 0) {
                    const pic_url = data.pic_url;

                    // #ifndef H5
                    if(false){
                        let reg = /(api\/qrcode\/goods-new)+/;
                        if(reg.test(this.posterGenerate)){
                            let url =  this.$api.index.test + '&url=' + btoa(pic_url);
                            this.$utils.batchSave(url);
                            return;
                        }
                    }
                    // #endif

                    this.$utils.batchSave(pic_url, 'image').then(() => {
                        uni.showToast({title: '保存成功'});
                    });
                } else {
                    uni.showToast({title: msg, icon: 'none'});
                }
            }).catch(() => {
                this.$hideLoading();
            })
        }
    },
}
</script>

<style scoped lang="scss">
$box: #f7f7f7;
.app-layout /deep/ .app-layout {
    overflow-y: auto;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.app-scroll {
    width: 100%;
    white-space: nowrap;
    padding: 0 #{14rpx};
}

.poster-goods {
    height: 100vh;

    .head {
        height: #{655rpx};
        width: 100%;
    }

    .setting {
        padding-top: #{20rpx};
        font-size: #{24rpx};
        color: #353535;
        background: #FFFFFF;
        padding-bottom: #{48rpx};

        .line {
            margin-bottom: #{24rpx};

            .label {
                height: #{56rpx};

                icon {
                    background-image: url("../../static/image/poster/mark.png");
                    background-size: 100% 100%;
                    height: #{21rpx};
                    width: #{21rpx};
                    background-repeat: no-repeat;
                    margin-left: #{24rpx};
                    border-radius: 50%;
                }

                text {
                    line-height: 1;
                    padding-left: #{12rpx};
                    padding-right: #{26rpx - 14rpx};
                }
            }

            .style-input {
                position: relative;
                height: #{56rpx};
                width: #{120rpx};
                background: $box;
                border-radius: #{5rpx};
                margin: 0 #{14rpx};

                .type-pure {
                    height: #{32rpx};
                    width: #{32rpx};
                    margin-right: #{10rpx};
                    background: #d8d8d8;
                }

                .type-gradient {
                    height: #{32rpx};
                    width: #{32rpx};
                    margin-right: #{10rpx};
                    background: linear-gradient(#d8d8d8, #FFFFFF);
                }

            }
        }

        .active {
            border-width: #{3rpx};
            border-style: solid;
            background: #FFFFFF !important;
        }

        .icon-active {
            background-image: url("../../static/image/poster/input-active.png");
            height: #{38rpx};
            width: #{38rpx};
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: #{-19rpx};
            right: #{-19rpx};
            z-index: 10;
            border-radius: 50%;
        }

        .line-input {
            position: relative;
            border-radius: #{5rpx};
            margin: 0 #{14rpx} #{14rpx};
            background: $box;
            width: #{140rpx};
            height: #{56rpx};

            .icon-square {
                background-size: 100% 100%;
                height: #{32rpx};
                width: #{32rpx};
                background-repeat: no-repeat;
            }

            text {
                margin-left: #{10rpx};
            }
        }

        .color-bg {
            position: relative;
            display: inline-block;
            height: #{60rpx};
            width: #{60rpx};
            border-radius: #{5rpx};
            border: 1px solid #e5e5e5;
            margin-right: #{26rpx};
            margin-top: #{19rpx};
        }
    }

    .button {
        font-size: #{32rpx};
        border-radius: #{40rpx};
        height: #{68rpx};
        margin: #{34rpx} auto 0;
        color: #ffffff;
        width: #{500rpx};
    }
}
</style>